<!--这个组件是公共头部给 微信，通讯录，发现 使用-->
<template>
  <div>
    <van-nav-bar :left-arrow="leftArrow" :fixed="fixed" :z-index="zIndex">
      <van-icon slot="right" class="iconfont icon_search margin-right-38" color="#333333" size="22"></van-icon>
      <van-icon slot="right" class="iconfont icon_add" color="#333333" size="22" @click="switchShow"></van-icon>
      <div  slot="left"><div class="main-title">{{title}}</div></div>
    </van-nav-bar>
    <div class="plus-wrap">
      <div class="plus-cover" v-if="isShow" @click="closeSwitch"></div>
<!--      <transition name="van-slide-right">  这个是 内置样式  在vant文档中 从右侧滑入-->
      <transition name="van-slide-right">
        <div class="plus-content" v-if="isShow">
          <ul>
            <li>
              <img src="./../../assets/img/head/group_chat.png" />
              <span>发起群聊</span>
            </li>
            <li>
              <img src="./../../assets/img/head/newFriend.png" />
              <span>添加朋友</span>
            </li>
            <li>
              <img src="./../../assets/img/head/saoyisao.png" />
              <span>扫一扫</span>
            </li>
            <li>
              <img src="./../../assets/img/head/money.png" />
              <span>收付款</span>
            </li>
            <li>
              <img src="./../../assets/img/head/email.png" />
              <span>帮助与反馈</span>
            </li>
          </ul>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { NavBar } from 'vant';
  Vue.use(NavBar);

  export default {
    name:'headerMain',
    props: ['title', 'leftArrow','fixed'],
    data(){
      return{
        zIndex:5,
        isShow:false
      }
    },
    methods:{
      switchShow:function () {
        this.isShow=true;
      },
      closeSwitch:function () {
        this.isShow=false;
      }
    }
  }
</script>

<style scoped>
  .m-header {
    height: 50px;
    line-height: 50px;
    background: #245fd7;
    color: #fff;
  }

  .m-header-icon {
    position: absolute;
    top: 16px;
    left: 6px;
    font-size: 18px;
  }

  .plus-cover {
    position: fixed;
    z-index: 9990;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .plus-content {
    width: 50%;
    /*height: 200px;*/
    position: fixed;
    overflow: auto;
    background: #1e2b39;
    top: 46px;
    right: 10px;
    z-index: 9999;
    padding-top: 10px;
    border-radius: 8px;
  }
  .plus-content img{
    height: 26px;
    width: 26px;
    margin-right: 10px;
  }
  li{
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    color: #fff;
  }
</style>
